<template>
  <div>
    <a-modal v-model="visible" centered title="缴费记录" @ok="handleOk">
      <div class="content" style="height: 400px;overflow: auto">
        <div
          v-for="(item,index) in list" :key="index"
          style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;width: 100%;border-bottom: 1px solid #E5E5E5;padding-bottom: 10px">
          <div>
            <h3>{{ item.title }}</h3>
            <p style="margin: 0;color: #222222;font-family: Microsoft YaHei;font-weight: 400;">{{ item.createDate }}</p>
          </div>
          <div style="color: #222222;font-weight: bold;font-size: 18px;">
            {{ item.price }}
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {recordList} from '@/api/device'

export default {
  data() {
    return {
      visible: false,
      money: false,
      list: []
    }
  },
  methods: {
    moneyBtn(e) {
      e.target.value > 0 ? this.money = true : this.money = false
    },
    handleOk(e) {
      this.visible = false;
    },
    dataList() {
      recordList().then(res => {
        this.list = res.result
      }).catch(err => {

      })
    }
  }
}
</script>

<style scoped>
.content::-webkit-scrollbar {
  width: 0px;
}

.content::-webkit-scrollbar-track {
  background-color: #fff;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}

.content::-webkit-scrollbar-thumb {
  background-color: #333;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

</style>